<template>
  <div class="lg:pt-6 !z-[388] transition-all duration-1000 lg:max-w-7xl w-full mx-auto">
    <div v-swiper:mySwiper="swiperOption" class="lg:rounded-[1rem] overflow-hidden">
      <div class="swiper-wrapper lg:max-w-[880px] lg:aspect-[75/26] max-lg:aspect-[375/131]">
        <div class="swiper-slide lg:rounded-[1rem] h-full rounded-none overflow-hidden" v-for="(i, index) in banners" :key="index">
          <nuxt-link :to="localePath(`${i.link_url}`)">
            <img
              :src="$globalFn.imgPrefixUrl(i.image || '')"
              class="size-full object-cover"
              :alt="i.code_alt || i.advstext"
              :title="i.code_alt || i.advstext"
            />
          </nuxt-link>
          <!-- home_b -->
        </div>
      </div>
      <div class="swiper-button-prev hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
        <i class="el-icon-arrow-left text-[1.25rem] text-white font-medium"></i>
      </div>
      <div class="swiper-button-next z-50 hidden lg:flex justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
        <i class="el-icon-arrow-right text-[1.25rem] text-white font-medium"></i>
      </div>
      <!-- 添加分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'BannerSwiper',
    props: {
      banners: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        swiperOption: {
          speed: 500, // 过渡动画速度调整为0.5秒
          loop: true,
          autoplay: {
            delay: 3000, // 切换间隔调整为3秒
            disableOnInteraction: false // 用户交互后继续自动播放
          },
          grabCursor: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          centeredSlidesBounds: true,
          spaceBetween: 20,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          // 将pagination移到navigation外部
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          },
          on: {
            slideChange(e) {}
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  :deep(.el-carousel__container) {
    @apply size-full;
  }
  .swiper-button-prev,
  .swiper-button-next {
    background-image: none;
  }
  // 添加分页器样式
  /deep/.swiper-pagination {
    .swiper-pagination-bullet-active {
      background-color: #ffffff !important;
      box-shadow: 0rem 0.13rem 0.75rem 0rem rgba(0, 0, 0, 0.2) !important;
      opacity: 1 !important;
      border-radius: 0.25rem !important;
      padding: 0 28px !important;
      position: relative;
      overflow: hidden;
      &::after {
        content: '';
        position: absolute;
        left: 2%;
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        overflow: hidden;
        border-radius: 0.25rem !important;
        width: 0;
        background: #ff4e33;
        animation: progress 3.5s linear; // 动画时间改为3秒
      }
    }
    .swiper-pagination-bullet {
      background-color: rgba(255, 255, 255, 0.6);
      opacity: 1;
      // box-shadow: 0rem 0.13rem 0.75rem 0rem rgba(0, 0, 0, 0.2) !important;
    }
  }
  @keyframes progress {
    0% {
      width: 0;
      // left: 0;
    }
    100% {
      width: 95%;
      // left: 0;
    }
  }
</style>
